<template>
  <section class="e-articleList">
    <section class="e-breadcrumb">
      <el-breadcrumb>
        <el-breadcrumb-item>商品一部</el-breadcrumb-item>
      </el-breadcrumb>
    </section>
    <section class="e-articleList-main">
      <div class="e-articleList-header">
        <div class="e-articleList-type">
          <label>分类：</label>
          <!--<span :class="params.category ? '' : 'e-color-theme'">全部</span>-->
          <span v-for="(item, index) in typeList" :key="index" style="margin-right: 8px;cursor: pointer" @click="typeChange(item)" :class="params.category === item.id ? 'e-color-theme' : ''">{{item.category_name}}</span>
        </div>
        <div class="e-e-articleList-tools">
          <div class="e-e-articleList-search e-float-left">
            <el-input v-model="params.keyWord" style="width: 300px" placeholder="输入关键字查询"></el-input>
            <el-button type="primary" style="margin-left: 20px" @click="queryArticleList">查询</el-button>
          </div>
          <div class="e-e-articleList-opera e-float-right e-float-clear">
            <el-button type="primary" @click="publishContent">发布内容</el-button>
            <el-button type="primary" @click="typeManage">分类管理</el-button>
          </div>
        </div>
      </div>
      <div class="e-articleList-content">
        <el-table
          :data="articleList"
          style="width: 100%">
          <el-table-column
            prop="title"
            label="标题"
            width="180">
          </el-table-column>
          <el-table-column
            prop="category"
            label="分类"
            width="180">
            <template slot-scope="scope">
              <span>{{ typeFilter(scope.row.category) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.status | statusFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="author"
            label="发布者">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleCheck(scope.row)">查看</el-button>
              <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync ="pagination.currentPage"
          :page-sizes.sync ="pagination.pageSizes"
          :page-size.sync ="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </section>
    <el-dialog
      title="分类管理"
      :visible.sync="typeManageOption.isTypeManageShow"
      :modal="false"
      width="500px"
      :append-to-body="true"
    >
      <div class="e-articleList-typeList">
        <div v-for="(item, index) in typeList" :key="index">
          <div class="e-float-left">
            {{item.type}}({{item.count}})
          </div>
          <div class="e-float-right e-float-clear">
            <el-button type="text" @click="fetchUrl(item)">获取链接</el-button>
            <el-button type="text" @click="editType(item)">编辑</el-button>
            <el-button type="text" @click="deleteType(item)">删除</el-button>
          </div>
        </div>
      </div>
      <div class="e-articleList-addType" v-show="isInAdding"  style="margin-top: 10px">
        <el-input style="width: 200px" maxlength="10" v-model="typeManageOption.newType"></el-input>
        <el-button type="text" style="margin-left: 8px" @click="saveTypeManage">保存</el-button>
        <el-button type="text" @click="cancelTypeManage">取消</el-button>
      </div>
      <el-button  style="margin-top: 10px" type="text" v-show="!isInAdding" @click="addType">+添加分类</el-button>
    </el-dialog>
  </section>
</template>
<script>
import articleApi from '@/apis/article'
import { pagination, publish } from '@/config/business'

export default {
  data () {
    return {
      typeList: [], // 商品分类
      articleList: [], // 商品列表
      pagination: { // 分页参数
        currentPage: pagination.currentPage,
        pageSizes: pagination.pageSizes,
        pageSize: pagination.pageSize,
        total: 0
      },
      typeManageOption: {
        id: '',
        newType: '', // 新类型
        isTypeManageShow: false // 是否显示分类管理界面
      },
      params: {
        category: 1,
        pageNum: '',
        pageSize: '',
        keyWord: ''
      },
      isInAdding: false // 是否在添加分类
    }
  },
  filters: {
    statusFilter (status) {
      return publish.status[status]
    }
  },
  methods: {
    typeChange (item) {
      this.params.category = item.id
      debugger
      this.queryArticleList()
    },
    typeFilter (category) {
      const type = this.typeList.find((type) => {
        return type.id === category
      })
      return type ? type.category_name : ''
    },
    queryArticleList () { // 查询商品列表
      this.params.pageNum = this.pagination.currentPage - 1
      this.params.pageSize = this.pagination.pageSize
      this.$http.request(articleApi.getArticleList, this.params).then((response) => {
        this.articleList = response.data
        for (let i = 0 ;i <20; i++) {
          this.articleList.push(this.articleList[0])
        }
        this.pagination.total = 30
      })
    },
    queryTypeList () {
      return this.$http.request(articleApi.getTypeList, {thirdCatalogue: 3}).then((response) => {
        this.typeList = response.data
        this.params.category = this.typeList.length ? this.typeList[0].id : null
      })
    },
    cancelTypeManage () {
      this.isInAdding = false
    },
    saveTypeManage () {
      this.isInAdding = false
    },
    fetchUrl () {

    },
    editType (item) {
      this.isInAdding = true
      this.typeManageOption.newType = item.type
    },
    addType () {
      this.isInAdding = !this.isInAdding
      this.typeManageOption.id = null
      this.typeManageOption.newType = ''
    },
    deleteType () {
    },
    handleCheck () {
    },
    handleEdit () {
      this.$router.push({
        path: '/article/publish'
      })
    },
    handleDelete (row) {
      this.$http.request(articleApi.deleteArticle,{
        uuid: row.id,
        operator: '0832'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
      this.queryArticleList()
    },
    handleSizeChange () {
      this.queryArticleList()
    },
    handleCurrentChange () {
      this.queryArticleList()
    },
    publishContent () { // 发布内容
      this.$router.push({
        path: '/article/publish'
      })
    },
    typeManage () { // 分类管理
      this.typeManageOption.isTypeManageShow = true
    }
  },
  created () {
    console.log(1111111111111111)
    this.queryTypeList().then(() => {
      this.queryArticleList()
    })
  }
}
</script>
<style lang="scss" scoped="scoped">
  @import "../../styles/element";

  .e-articleList-main {
    padding: 8px;
    background: $--background-color-base;
    height: calc(100% - #{$e_breadcrumb-height});
    overflow-y: auto;
  }

  .e-articleList-header {
    background: $--color-white;
    .e-articleList-type {
      padding: 0 10px;
      line-height: 50px;
      height: 50px;
      border-bottom: $--border-base;
    }
    .e-e-articleList-tools {
      padding: 0 10px;
      line-height: 50px;
      height: 50px;
    }
  }

  .e-articleList-typeList{
    height: 40px;
    line-height: 40px;
  }
  .e-articleList-content {
    margin-top: 8px;
    background: $--color-white;
  }
</style>
